<template>
  <el-dialog
    title="批量导入设备"
    :visible.sync = "batchUpLoad"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :before-close="closeModel"
    width="500px"
    center
    append-to-body>
    <hr class="boundary">

    <div class="content" style="padding-top: 20px">
      <span>
        提示：请根据系统提供的文件模板进行填充
        <a href="http://172.22.42.208:8080/devices-template.xlsx" class="downFile">下载模板</a>
      </span>
      <el-upload
        style="margin: 30px 0 0 0"
        class="upload-demo"
        ref="upload"
        accept=".xlsx,.xls"
        action="http://172.22.42.208:8080/devices/importExcel/Excel"
        :headers="headers"
        :with-credentials="true"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="successUploadCallBack"
        :on-error="errorUploadCallBack"
        :before-upload="beforeUpload"
        :http-request="getFile"
      >
        <el-button
        type="primary"
        size="small"
        style="position: center"
        >
          选择文件
        </el-button>
        <div slot="tip" style="margin:25px 0 0 0" class="el-upload__tip">
          只能上传.xls/.xlsx文件，且每次只能上传单个文件
        </div>
      </el-upload>
    </div>

    <span slot="footer" class = "el-dialog__footer">
      <el-button size="small" @click="closeModel">取 消</el-button>
      <el-button type="primary" size="small" @click="checkFile">上 传</el-button>
    </span>

    <el-dialog
      title="校验详情"
      width="600px"
      :visible.sync="showChecked"
      @close="closeChecked"
      append-to-body
    >
      <div style="height: 200px;overflow-y: scroll">
        <ul>
          <li v-for="item in ckMessages"
              :class="{
                errorStyle: item.result===false,
                successStyle: item.result===true
              }"
          >
            {{item.message}}
          </li>
        </ul>
      </div>
      <div slot="footer" class = "el-dialog__footer">
        <span style="color:#E6A23C;font-size:10px;display:inline-block;float:left">
          *若存在数据不合法，则无法导入
        </span>
        <el-button size="small" @click="closeChecked">取 消</el-button>
        <el-button type="primary" size="small" @click="upload">导 入</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
  import axios from 'axios'

  export default {
    props:{
      batchUpLoad: Boolean
    },
    computed:{
      headers(){
        return {
          'Content-Type': 'multipart/form-data;boundary=------WebKitFormBoundary0rqnCwnBDfhhzz4g',
          'X-Requested-With':'XMLHttpRequest'
        }
      }
    },
    data(){
      return {
        objArr: [],
        isExport: false,
        percentage: 0,
        file: '',
        showChecked: false,
        devices: [],
        ckMessages: []
      }
    },
    methods:{
      closeModel(){
        this.percentage = 0
        this.$emit("closeModel")
      },
      closeChecked(){
        this.devices = []
        this.ckMessages = []
        this.showChecked = false
      },
      handlePreview(file){
        console.log(file)
      },
      handleRemove(file,fileList){
        console.log("移除文件")
        this.objArr = []
      },
      successUploadCallBack(){
        console.log("上传成功")
      },
      errorUploadCallBack(){
        console.log("上传失败")
      },
      // selectFile(file){
      //   console.log(file.raw)
      //   this.getFileContent(file.raw)
      // },
      beforeUpload(file){
        if(file.name.split('.')[1]!='xlsx' && file.name.split('.')[1]!='xls'){
          console.log(file.name.split('.')[1])
          this.$message({
            type: 'warning',
            message: '只能上传EXCEL格式的文件'
          })
        }else if (file===null){
          this.$message({
            type: 'warning',
            message: '请选择文件'
          })
        }
      },
      getFile(item){
        console.log("test"+item.file)
        this.file = item.file
      },
      checkFile(){
        this.showChecked = true
        const fd = new FormData()
        fd.append('file',this.file)
        axios.post(this.api+'devices/importExcel/checkFile',fd,{
          headers:{
            'Content-Type': 'multipart/form-data;boundary=------WebKitFormBoundary0rqnCwnBDfhhzz4g',
            'X-Requested-With':'XMLHttpRequest'
          },
          withCredentials: true
        }).then(res => {
          res.data.ckMessages.forEach(item => {
            console.log(item.message+item.result)
          })
          this.ckMessages = res.data.ckMessages
          this.devices = res.data.devices
          console.log(this.devices)
          this.showChecked = true
        })
      },
      async upload(){
        let self = this
        let results
        console.log(self.devices)
        await axios.post(this.api+'devices/batch',self.devices,{
          headers:{
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
          },
          withCredentials: true
        }).then(res => {
          console.log('-_-'+res.data)
          results=res.data
          console.log('test'+results)
        })
        if (results>0) {
          self.$message({
            type: 'success',
            message: '成功导入'+results+'行'
          })
          this.showChecked = false
        } else {
          self.$message({
            type: 'warning',
            message: '导入失败！'
          })
        }
      }
    }
  }
</script>
<style scoped>
  .content {
    height: 200px;
    width: 100%;
    text-align: center;
  }
  .errorStyle {
    color: #dd6161;
    padding: 0 10px 5px 15px;
    font-size: 10px;
  }

  .successStyle {
    color: #5daf34;
    padding: 0 10px 5px 15px;
    font-size: 10px;
  }
</style>
